@import "public.scss";

.return-header{
  background-color: #1f2735;
  height: px2rem(55px);
  padding-top: px2rem(15px);
  .title{
    width: 100%;
    position: absolute;
    text-align: center;
    font-size: px2rem(17px);
    color: #fff;
  }
  img{
    margin-left: px2rem(15px);
    width:px2rem(25px);
    height:px2rem(25px);
  }
}

.topcourse{
  padding: px2rem(5px) px2rem(0px);
  text-align: center;
  background: #fff;
  .num{
    display: inline-block;
    border-radius: 50%;
    background-color: gold;
    color: #fff;
    font-size: px2rem(10px);
    width: px2rem(15px);
    height: px2rem(15px);
    text-align: center;
    line-height: px2rem(15px);
  }
  .text{
    color: pink;
    font-size: px2rem(12px);
  }
}

.scrollprompt{
  width:100%;
  background-color: #fdfdf5;
  font-size: px2rem(12px);
  color: #9e9880;
  display: inline-block;
  overflow: hidden;
  text-align: initial;
  white-space: nowrap;
}

.apprenticetask{
  width:100%;
  background: #fff;
  padding: px2rem(15px);
  p{
    font-size: px2rem(18px);
    color: #333;
  }
  .userwrap{
    margin-top:px2rem(15px);
    display: flex;
    flex-wrap: wrap;
    .headportrait{
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
      width: px2rem(55px);
      height: px2rem(55px);
    }
    .itemcenter{
      padding-top: px2rem(3px);
      padding-left: px2rem(20px);
      flex: 0 0 50%;
      max-width: 50%;
      .bigsize{
        font-size: px2rem(15px);
        color: #333;
        display: block;
      }
      .smallsize{
        font-size: px2rem(13px);
        color: #999;
        display: block;
        margin-top: px2rem(5px);
      }
    }
    .itemright{
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
      a{
        display: inline-block;
        background-color: #ffb811;
        border-radius: 50px;
        width: px2rem(80px);
        margin-top: px2rem(13px);
        color: #fff;
        text-align: center;
        padding-top: px2rem(6px);
        padding-bottom: px2rem(6px);
        font-size: px2rem(13px);
        margin-left: px2rem(30px);
      }
    }
  }
}

.redenvelopes{
  width:100%;
  background: #fff;
  padding:px2rem(10px) px2rem(15px);
  margin-top: px2rem(10px);
  display: flex;
  flex-wrap: wrap;
  .redenvelopesimg{
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    width: px2rem(65px);
    height: px2rem(45px);
  }
  .itemcenter{
    padding-left: px2rem(20px);
    flex: 0 0 50%;
    max-width: 50%;
    .bigsize{
      font-size: px2rem(15px);
      color: #333;
      display: block;
    }
    .smallsize{
      font-size: px2rem(13px);
      color: #999;
      display: block;
      margin-top: px2rem(5px);
    }
  }
  .itemright{
    margin-top: px2rem(10px);
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    text-align: right;
    span{
      display: inline-block;
      color: rgb(249, 50, 50);
      font-size: px2rem(22px);
      em{
        font-size: px2rem(12px);
      }
    }
  }
}

.tasklist{
  width:100%;
  background: #fff;
  padding: px2rem(15px);
  margin-top:10px;
  p{
    font-size: px2rem(18px);
    color: #333;
  }
  .userwrap{
    margin-top:px2rem(15px);
    display: flex;
    flex-wrap: wrap;
    .headportrait{
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
      filter: blur(2px);
      -webkit-filter: blur(2px);
      width: px2rem(55px);
      height: px2rem(55px);
    }
    .itemcenter{
      padding-top: px2rem(3px);
      padding-left: px2rem(20px);
      flex: 0 0 50%;
      max-width: 50%;
      .bigsize{
        font-size: px2rem(15px);
        color: #333;
        display: block;
        margin-bottom: px2rem(8px);
      }
      .lootallsize{
        margin-top: px2rem(10px);
      }
      .smallsize{
        font-size: px2rem(13px);
        color: red;
        border:1px solid red;
        display: inline;
        padding: px2rem(2px) px2rem(5px);
      }
    }
    .itemright{
      margin-top: px2rem(15px);
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
      text-align: right;
      span{
        display: inline-block;
        color: rgb(249, 50, 50);
        font-size: px2rem(22px);
        em{
          font-size: px2rem(12px);
        }
      }
    }
    .lootall{
      color: #ccc;
      font-size: px2rem(16px);
      margin-top: px2rem(15px);
    }
  }
}

.tasklistNotice{
  width:100%;
  background: #fff;
  padding: px2rem(15px);
  margin-top:10px;
  p{
    font-size: px2rem(18px);
    color: #333;
  }
  .userwrap{
    margin-top:px2rem(15px);
    display: flex;
    flex-wrap: wrap;
    .headportrait{
      flex: 0 0 25%;
      max-width: 25%;
      background: #F58076;
      border-radius: 4px;
      line-height: px2rem(20px);
      height: px2rem(55px);
      span{
        display: inline-block;
        width:100%;
        text-align: center;
        font-size: px2rem(14px);
        color: #fff;
        &.top{
          margin-top: px2rem(10px);
        }
      }
    }
    .itemcenter{
      padding-top: px2rem(3px);
      padding-left: px2rem(20px);
      flex: 0 0 41%;
      max-width: 41%;
      .bigsize{
        font-size: px2rem(15px);
        color: #333;
        display: block;
        margin-bottom: px2rem(8px);
      }
      .lootallsize{
        margin-top: px2rem(10px);
      }
      .smallsize{
        font-size: px2rem(13px);
        color: red;
        border:1px solid red;
        display: inline;
        padding: px2rem(2px) px2rem(5px);
      }
    }
    .itemright{
      margin-top: px2rem(15px);
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
      text-align: right;
      span{
        display: inline-block;
        color: rgb(249, 50, 50);
        font-size: px2rem(22px);
        em{
          font-size: px2rem(12px);
        }
      }
    }
    .lootall{
      color: #ccc;
      font-size: px2rem(16px);
      margin-top: px2rem(15px);
    }
  }
}




